<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <!-- 引入 Bootstrap -->
    <!--
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

</head>

<style>
    a {
        color: #ffffff;
    }

    h1 {
        /*文字对齐*/
        text-align: center;
    }
</style>

<body>

<div class="container">
    <button class="btn btn-success pull-right"><a th:href="@{'/api/v1/user/insert'}">添加用户</a></button>
    <h1>用户管理系统</h1>
    <!--table-striped:斑马线格式，table-bordered：带边框的表格，table-hover：鼠标悬停高亮的表格-->
    <table class="table table-striped table-bordered table-hover text-center">
        <thead>
        <tr style="text-align:center">
            <!--        th标签定义html表格中的表头单元格-->
            <th style="text-align:center">姓名</th>
            <th style="text-align:center">年龄</th>
            <th style="text-align:center">住址</th>
            <th style="text-align:center">性别</th>
            <th style="text-align:center">电话号码</th>
        </tr>
        </thead>
        <!--tr标签定义html表格中的所有行-->
        <!--    遍历集合，如果被遍历的变量users为null或者不存在，则不会进行遍历，也不会报错-->
        <tr th:each="user:${page.records}">
            <!--        td标签定义html表格中的标准单元格-->
            <td style="vertical-align: middle!important;" th:text="${user.userName}"></td>
            <td style="vertical-align: middle!important;" th:text="${user.userAge}"></td>
            <td style="vertical-align: middle!important;" th:text="${user.userAddr}"></td>
            <td style="vertical-align: middle!important;" th:text="${user.userSex}"></td>
            <td style="vertical-align: middle!important;" th:text="${user.userPhone}"></td>
            <td>
                <!--         a标签用来定义超链接 href表示超链接-->
                <a class="btn btn-primary" th:href="@{'/api/v1/user/updatePage/'+${user.userId}}">更改</a>
                <a class="btn btn-danger" th:href="@{'/api/v1/user/delete/'+${user.userId}}">删除</a>
            </td>
        </tr>
    </table>

    <!-- 显示分页信息 -->
    <div class="row">
        <!--分页文字信息  -->
        <div class="col-md-6">当前 [[${page.current}]]页,总[[${page.pages }]]
            页,总[[ ${page.total }]] 条记录
        </div>
        <!-- 分页条信息 -->
        <div class="col-md-6">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <!--点击首页会跳转到第一页，并且首页禁用-->
                    <th:block th:if="${page.current==1}">
                        <li class="active,disabled">
                            <a>首页</a></li>
                    </th:block>

                    <th:block th:if="${page.current>1}">
                        <li><a th:href="@{/list(pn=1)}">首页</a></li>
                    </th:block>

                    <li th:if="${page.hasPrevious()}">
                        <a th:href="@{/list(pn=${page.getCurrent()-1})}">
                            <span aria-hidden="true">&laquo;</span>

                        </a>
                    </li>

                    <!--遍历页码，只显示五页，点击下一页之后，每次多遍历两个页码-->
                    <th:block th:if="${page.getCurrent()<=3}" th:each="i:${#numbers.sequence(1,5)}">
                        <!--加判断是不是当前页，如果是 高亮显示，并且取消超链接，这样避免了点击当前页重复发送请求查询数据-->
                        <th:block th:if="${page.getCurrent()==i}">

                            <li class="active">
                                <a th:text="${i}"></a>
                            </li>
                        </th:block>

                        <th:block th:if="${page.getCurrent()!=i}">
                            <li>
                                <a th:text="${i}" th:href="@{/api/v1/user/list(pn=${i})}"></a>
                            </li>
                        </th:block>


                    </th:block>


                    <th:block th:if="${page.getCurrent()>3 && page.getCurrent()+2<=page.getPages()}"
                              th:each="i:${#numbers.sequence(page.getCurrent()-2,page.getCurrent()+2)}">
                        <!--同理上-->
                        <th:block th:if="${page.getCurrent()==i}">

                            <li class="active">
                                <a th:text="${i}"></a>
                            </li>
                        </th:block>

                        <th:block th:if="${page.getCurrent()!=i}">
                            <li>
                                <a th:text="${i}" th:href="@{/api/v1/user/list(pn=${i})}"></a>
                            </li>
                        </th:block>


                    </th:block>


                    <th:block th:if="${page.getCurrent()+2>page.getPages()}"
                              th:each="i:${#numbers.sequence(page.getPages()-4,page.getPages())}">
                        <!--同理上-->
                        <th:block th:if="${page.getCurrent()==i}">

                            <li class="active,disabled">
                                <a th:text="${i}"></a>
                            </li>
                        </th:block>

                        <th:block th:if="${page.getCurrent()!=i}">
                            <li>
                                <a th:text="${i}" th:href="@{/api/v1/user/list(pn=${i})}"></a>
                            </li>
                        </th:block>


                    </th:block>


                    <!--下一页-->
                    <li th:if="${page.hasNext()}">
                        <a th:href="@{/api/v1/user/list(pn=${page.current+1})}">
                            <span aria-hidden="true">&raquo;</span>
                        </a></li>


                    <!--点击末页会跳转到最后一页，并且最后一页禁用-->
                    <th:block th:if="${page.current<page.pages}">
                        <li><a th:href="@{/api/v1/user/list(pn=${page.pages})}">末页</a></li>

                    </th:block>

                    <th:block th:if="${page.current==page.pages}">
                        <li class="active,disabled"><a>末页</a></li>

                    </th:block>


                </ul>
            </nav>
        </div>
    </div>
</div>
</body>

</html>





